<template>
  <el-breadcrumb>
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品大屏</el-breadcrumb-item>
  </el-breadcrumb>
  <div style="height: 700px; margin-top: 40px" class="flex-float">
    <div
      ref="main"
      style="
        border-radius: 10px;
        padding: 20px;
        margin-right: 20px;
        width: 50%;
        height: 100%;
        background-color: #fff;
      "
    ></div>
    <div
      ref="main2"
      style="
        border-radius: 10px;
        padding: 20px;
        width: 50%;
        height: 100%;
        background-color: #fff;
      "
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
//  按需引入 echarts
import * as echarts from "echarts";
import { productsell, productline } from "@/api/services";

const main = ref();
const main2 = ref();
let myChart = null;
let myChart2 = null;
onMounted(() => {
  init();
});
onUnmounted(() => {
  window.removeEventListener("resize", ()=>{
    myChart.resize();
    myChart2.resize();
  });
});
const init = async () => {
  const res = await productsell();
  const res2 = await productline();
  // console.log("res2: ", res2);
  let data = [];
  res.result.rows.forEach(item => {
    let obj = {
      value: item["销售数量"],
      name: item["鲜花种类"],
    };
    data.push(obj);
  });
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(main.value);
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: "鲜花销售数量",
      subtext: "",
      left: "left",
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      //   orient: "vertical",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  myChart2 = echarts.init(main2.value);
  var option2 = {
    title: {
      text: "鲜花销售数量",
      subtext: "",
      left: "left",
    },
    tooltip: {
      trigger: "axis",
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    legend: {
      //   orient: "vertical",
      left: "center",
    },
    xAxis: {
      type: "category",
      data: res2.result.row.map(item => item["日期"]),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: res2.result.row.map(item => item["销售额"]),
        type: "line",
      },
    ],
  };
  myChart2.setOption(option2);

  // 监听窗口变化，重绘图表
  window.addEventListener("resize", () => {
    myChart.resize();
    myChart2.resize();
  });
};
</script>

<style scoped></style>
